<template>
  <div class="singer">
    <div class="singer-header">
      <!-- 语种 -->
      <ul>
        <li>语种：</li>
        <li v-for="(item,index) in navBar.area" :key="index" @click="areaClick(item)"><span :class="{active: area===item.name}">{{item.name}}</span></li>
      </ul>

      <!-- 分类 -->
      <ul>
        <li>分类：</li>
        <li v-for="(item,index) in navBar.type" :key="index"><span @click="typeClick(item)" :class="{active: type===item.name}">{{item.name}}</span></li>
      </ul>

      <!-- 筛选 -->
      <ul>
        <li>筛选：</li>
        <li v-for="(item,index) in initial" :key="index" @click="selectClick(item)"><span :class="{active: initials=== item}">{{item}}</span></li>
      </ul>

      <!-- 歌手排行榜 -->
      <div class="singer-wrap">
        <div class="singer-img" @click="$router.push('/home/singerLeaderBoard')">
          <div class="mask"></div>
          <img v-if="artists.length!==0" v-lazy="artists[0].img1v1Url" alt="">
          <p>歌手排行榜<i class="iconfont icon-youjiantou
"></i></p>
        </div>
        <div class="singer-img" v-for="(item,index) in artists" :key="index" @click="ToSingerMsg(item)">
          <img v-lazy="item.img1v1Url" v-if="artists.length!==0" alt="">
          <div class="author">{{item.name}}</div>
        </div>
      </div>

      <!-- 分页器 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="size" :page-sizes="[30, 50, 80, 100]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="950">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getSingerData } from '@/api/singer'

export default {
  name: 'MySinger',
  created() {
    this.getSingerMsg()
  },
  data() {
    return {
      navBar: {
        area: [
          { name: '全部', id: -1 },
          { name: '华语', id: 7 },
          { name: '欧美', id: 96 },
          { name: '日本', id: 8 },
          { name: '韩国', id: 16 },
          { name: '其他', id: 0 }],
        type: [
          { name: '全部', id: -1 },
          { name: '男歌手', id: 1 },
          { name: '女歌手', id: 2 },
          { name: '乐队组合', id: 3 }],
      },
      initial: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],
      type: '全部',
      area: '全部',
      initials: '热门',
      queryInfo: {
        type: -1,
        area: -1,
        limit: 30,
        offset: 0,
        initial: -1
      },
      // 储存歌手信息
      artists: [],
      num: 1,
      size: 0
    }
  },
  methods: {
    areaClick(area) {
      this.area = area.name
      this.queryInfo.area = area.id
      this.getSingerMsg()
    },
    typeClick(item) {
      this.type = item.name
      this.queryInfo.type = item.id
      this.getSingerMsg()
    },
    selectClick(item) {
      this.initials = item
      if (this.initials !== '热门') {
        this.queryInfo.initial = item
      }
      else {
        this.queryInfo.initial = -1
      }
      console.log(item, this.queryInfo.initial)
      this.getSingerMsg()
    },
    // 获取歌手信息
    async getSingerMsg() {
      const { data: res } = await getSingerData(this.queryInfo)
      this.artists = res.artists
      this.num = 1
      console.log(res)
    },
    handleSizeChange(page) {
      this.queryInfo.limit = page
      this.getSingerMsg()
    },
    handleCurrentChange(num) {
      // this.num = num
      this.queryInfo.offset = (num - 1) * this.queryInfo.limit
      this.getSingerMsg()
    },
    ToSingerMsg(item) {
      console.log(item)
      window.sessionStorage.setItem('singerId', item.id)
      this.$router.push('/home/singerDetail')
    }
  }
}
</script>

<style lang="less" scoped>
.singer {
  .singer-header {
    ul {
      display: flex;
      li {
        padding: 5px 0;
        &:nth-child(n + 2) {
          margin: 0 10px;
        }
        .active {
          color: red;
        }
      }
    }
  }
  .singer-wrap {
    .singer-img {
      position: relative;
      display: inline-block;
      margin: 10px 18px;
      img {
        width: 200px;
        height: 200px;
      }
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 200px;
        height: 200px;
        background: rgba(150, 50, 100, 0.9);
        &::before {
          content: '歌手榜';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-size: 25px;
        }
      }
      .author {
        width: 200px;
        text-align: center;
        margin-top: 5px;
        overflow: hidden;
        /* 第二步：让文本不会换行， 在同一行继续 */
        white-space: nowrap;
        /* 第三步：用省略号来代表未显示完的文本 */
        text-overflow: ellipsis;
      }
      p {
        margin-top: 5px;
        i {
          font-size: 16px;
        }
      }
    }
  }
}
</style>